<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { equipApi } from '@/api/controller';
  import { ElMessageBox } from 'element-plus';
  import { Toastloading, ToastSuccess, ToastWarning } from '@/utils/public';
  import xmImage from "@/components/xmImage/index.vue";
  import Pagination from "@/components/Pagination/index.vue";
  import shelveForm from "./components/shelveForm.vue";
  const shelveFormRef = ref()
  const action = reactive({
    total:0,
    list:[] as any[],
    EquipType:[] as any[],
  })
  const listQuery = reactive({
    equip_id:'',
    equip_type:'',
    equip_level:'',
    equip_sex:'',
    equip_name:'',
    shelve_name:'',
    page: 1,
    limit: 20,
  })
  const typeText = (type=0)=>{
    return type==1?'是':'否'
  }
  const priceTypeArr = [
    {type:1,text:'钻石'}
  ] as Array<any>
  const handleFilter = ()=>{
    listQuery.page = 1
    getList()
  }
  const resetQuery = ()=>{
    Object.assign(listQuery,{
      equip_id:'',
      equip_type:'',
      equip_level:'',
      equip_sex:'',
      shelve_name:'',
      page: 1,
      limit: 20,
    })
    getList()
  }
  const handleShelveForm = (row:any = {})=>{
    shelveFormRef.value.openDialog({
      ...row,
      priceTypeArr
    })
  }
  const handleDelete = (row:any = {})=>{
    const { shelve_id=0 } = row
    if(!shelve_id) return ToastWarning('缺少shelve_id')
    ElMessageBox.confirm("确定删除此货架吗?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(async () => {
      const loading = Toastloading();
      equipApi.delEquipShelve({shelve_id}).then(()=>{
        ToastSuccess("删除成功!");
        loading.close();
        getList();
      }).catch(()=>{
        loading.close();
      })
    }).catch(() => {});
  }
  const filtersType = (type:any = 0)=>{
    if(!type) return ''
    const { name=''} = action.EquipType.find(res=>res.id == type) || { name:'' }
    return name
  }
  const getEquipType = async()=>{
    const res = await equipApi.getEquipType(listQuery)
    const { list=[] } = res.data || {}
    action.EquipType = list
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await equipApi.equipShelveList(listQuery)
    loading.close()
    const { data=[], total=0 } = res.data
    action.list = data
    action.total = total
  }
  onMounted(()=>{
    getEquipType()
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <div class="label">装备ID：</div>
          <el-input v-model="listQuery.equip_id" clearable placeholder="请输入装备ID"/>
        </div>
        <div class="labelItem">
          <div class="label">装备名称：</div>
          <el-input v-model="listQuery.equip_name" clearable placeholder="请输入装备名称"/>
        </div>
        <div class="labelItem">
          <div class="label">货架装备名称：</div>
          <el-input v-model="listQuery.shelve_name" clearable placeholder="请输入货架装备名称"/>
        </div>
        <div class="labelItem">
          <div class="label">装备稀有度：</div>
          <el-input v-model="listQuery.equip_level" clearable placeholder="请输入装备稀有度"/>
        </div>
        <div class="labelItem">
          <div class="label">装备类型：</div>
          <el-select v-model="listQuery.equip_type" clearable placeholder="请选择装备类型">
            <el-option
              v-for="option in action.EquipType"
              :label="option.name"
              :value="option.id"
            />
          </el-select>
        </div>
        <div class="labelItem">
          <div class="label">装备性别：</div>
          <el-select v-model="listQuery.equip_sex" clearable placeholder="请选择装备性别">
            <el-option label="男" :value="1" />
            <el-option label="女" :value="2" />
          </el-select>
        </div>
        <div class="labelItem">
          <el-button type="primary" @click="handleFilter">查询</el-button>
          <el-button type="primary" @click="resetQuery">重置</el-button>
          <el-button type="primary" @click="handleShelveForm">新增</el-button>
        </div>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column min-width="120" prop="shelve_id" label="装备货架ID" />
      <el-table-column min-width="120" prop="shelve_name" label="货架装备名称" />
      <el-table-column min-width="120" prop="shelve_image" label="货架装备图片">
        <template #default="scope">
          <xmImage :src="scope.row.shelve_image" :list="[scope.row.shelve_image]" />
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="price_type" label="价格类型">
        <template #default="scope">
          {{ priceTypeArr.find(res=>res.type == scope.row.price_type)?.text || scope.row.price_type }}
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="price" label="价格" />
      <el-table-column min-width="120" prop="equip_id" label="装备ID" />
      <el-table-column min-width="120" prop="equip_name" label="装备名称" />
      <el-table-column min-width="120" prop="equip_type" label="装备类型">
        <template #default="scope">
          {{ filtersType(scope.row.equip_type)}}
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="equip_sex" label="装备性别">
        <template #default="scope">
          {{ ['','男','女'][scope.row.equip_sex] }}
        </template>
      </el-table-column>
      <el-table-column min-width="120" prop="equip_level" label="装备稀有度" />
      <el-table-column width="180" fixed=right label="操作">
        <template #default="scope">
          <el-button type="primary" @click="handleShelveForm(scope.row)">编辑</el-button>
          <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
    <shelveForm ref="shelveFormRef" @updateList="getList" />
  </div>
</template>